<template>
  <div class="app-container">
    <!-- 搜索区域 -- START -->
    <div class="filter-container">
      <el-form :inline="true" label-width="100px" ref="searchFromRef" :model="listQuery.item">
        <el-row  :gutter="20">
          <!-- 搜索区域 - 条件区域 -- START -->
          <el-col :span="12" :xl="6" :lg="8">
            <el-form-item label="用户名：">
              <el-input placeholder="请输入用户名" v-model="listQuery.item.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xl="6" :lg="8">
            <el-form-item label="状态：">
              <el-select v-model="listQuery.item.state" class="m-2">
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xl="6" :lg="8">
            <el-form-item label="用户名1：">
              <el-input placeholder="请输入用户名1" v-model="listQuery.item.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xl="6" :lg="8" :class="{hidden: !moreQueryConditionOpen}">
            <el-form-item label="用户名2：">
              <el-input placeholder="请输入用户名2" v-model="listQuery.item.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xl="6" :lg="8" :class="{hidden: !moreQueryConditionOpen}">
            <el-form-item label="用户名3：">
              <el-input placeholder="请输入用户名3" v-model="listQuery.item.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- 搜索区域 - 条件区域 -- END -->
          <!-- 搜索区域 - 功能区域 -- START -->
          <el-col :span="12" :xl="6" :lg="8">
            <el-form-item class="handle-button-container">
              <el-button @click="handleResetFields">
                <el-icon><RefreshRight /></el-icon>
                重置
              </el-button>
              <el-button type="primary" @click="handleFilter" :loading="btnLoading">
                <el-icon><search /></el-icon>
                查询
              </el-button>
              <el-button link type="primary" @click="handleToggleMore()">
                <template v-if="!moreQueryConditionOpen">
                  <el-icon><ArrowDown /></el-icon>
                  展开
                </template>
                <template v-else>
                  <el-icon><ArrowUp /></el-icon>
                  收起
                </template>
              </el-button>
            </el-form-item>
          </el-col>
          <!-- 搜索区域 - 功能区域 -- END -->
        </el-row>

      </el-form>
    </div>
    <!-- 搜索区域 -- END -->

    <!-- 结果展示区 -- START -->
    <div class="result-list-container">

      <!-- 功能按钮区 -- START -->
      <div class="handle-container">
        <el-button
          @click="handleCreate()"
          :loading="btnLoading"
          type="primary"
          v-handle-auth:CREATE="{'meta': this.$route.meta}"
        >
          <el-icon><plus /></el-icon>
          新建
        </el-button>
        <el-popconfirm
          title="确定要删除吗？"
          @confirm="handleBatchDelete()"
        >
          <template #reference>
            <el-button
              :loading="btnLoading"
              type="danger"
              plain
            >
              <el-icon><Delete /></el-icon>
              批量删除
            </el-button>
          </template>
        </el-popconfirm>
        <!-- 刷新 -->
        <el-tooltip
          effect="dark"
          content="刷新"
          placement="top"
        >
          <el-button
            @click="handleFilter()"
            circle
          >
            <el-icon><RefreshRight /></el-icon>
          </el-button>
        </el-tooltip>
        <!-- 列设置 -->
        <el-tooltip
          effect="dark"
          content="列设置"
          placement="top"
        >
          <el-button
            @click="handleColumnSettings()"
            circle
          >
            <el-icon><Setting /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
      <!-- 功能按钮区 -- END -->

      <!-- 列表展示区 -- START -->
      <div class="table-list">
        <el-table
          :data="list"
          v-loading="listLoading"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column align="center" label="序号" width="60">
            <template v-slot="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户名" prop="name"/>
          <el-table-column label="密码" prop="pwd"/>
          <el-table-column label="更新时间" width="160" align="center">
            <template v-slot="scope">
              <span>{{scope.row.updateTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state" width="80" align="center">
            <template v-slot="scope">
              <template v-if="scope.row.state === '1'">
                <span class="enable-label">启用</span>
              </template>
              <template v-if="scope.row.state === '0'">
                <span class="forbidden-label">禁用</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="150"  class-name="small-padding fixed-width handle-td">
            <template v-slot="scope">
              <el-link
                type="primary"
                title="查看"
                @click="handleDetail(scope.row)"
                v-handle-auth:DETAIL="{'meta': this.$route.meta}"
              >
                查看
              </el-link>
              <el-link
                type="primary"
                title="编辑"
                @click="handleUpdate(scope.row)"
                v-handle-auth:UPDATE="{'meta': this.$route.meta}"
              >
                编辑
              </el-link>
              <el-popconfirm
                title="确定要删除吗？"
                @confirm="handleDelete(scope.row)"
              >
                <template #reference>
                  <el-link
                    type="danger"
                    title="删除"
                    v-handle-auth:DELETE="{'meta': this.$route.meta}"
                  >
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表展示区 -- END -->

      <!-- 分页 -- START -->
      <pagination
        :total="listQuery.page.total"
        v-model:current-page="listQuery.page.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </pagination>
      <!-- 分页 -- END -->
    </div>
    <!-- 结果展示区 -- END -->

    <!-- 列设置 -- START -->
    <column-settings></column-settings>
    <!-- 列设置 -- END -->

  </div>
</template>

<script>
import { getList, deleteSave } from '@/api/nav'
import { ENABLED_STATE_ENUM } from '@/config'
import { mapGetters } from 'vuex'
// 图标组件
import { Search, Plus, Setting, RefreshRight, ArrowDown, ArrowUp, Delete } from '@element-plus/icons-vue'
// 分页组件
import Pagination from '@/components/Pagination'
// 列设置组件
import ColumnSettings from '@/components/ColumnSettings'

// 当前模块名称
const MODULE_VALUE = 'DRAWER_DEMO'

export default {
  name: 'DrawerDemo',
  computed: {
    ...mapGetters([
      'drawerReloadPage'
    ])
  },
  components: {
    Pagination,
    Search,
    Plus,
    Setting,
    RefreshRight,
    ArrowDown,
    ArrowUp,
    Delete,
    ColumnSettings
  },
  data() {
    return {
      moreQueryConditionOpen: false, // 查询区域 - 是否展开更多查询条件
      btnLoading: false,
      listLoading: false,
      listMultipleSelection: [], // 多选
      list: [],
      listQuery: {
        page: {
          pageNum: 1,
          total: 0,
          pageSize: 10
        },
        item: {
          name: '',
          state: ''
        }
      },
      // 状态列表
      stateList: ENABLED_STATE_ENUM
    }
  },
  watch: {
    // 查询条件体
    listQuery: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 监听 是否重载页面标识 ， true：重载 false：不重载
    drawerReloadPage: {
      handler: function(val, oldVal) {
        if (val === false) {
          this.getList()
        }
      },
      deep: true
    }
  },
  created() {
    // 取列表
    this.getList()
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 查询区域 - 展开 / 折叠
    handleToggleMore() {
      this.moreQueryConditionOpen = !this.moreQueryConditionOpen
    },
    // 列设置
    handleColumnSettings() {
      // this.columnSettingsVisible = true
      this.$store.dispatch('ShowColumnSettingsDrawer', {
        module: MODULE_VALUE,
        params: {}
      }).then(res => {

      })
    },
    // 多选结果赋值
    handleSelectionChange(val) {
      this.listMultipleSelection = val
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.listQuery.page.pageSize = val
      this.getList()
    },
    // 改变当前页面
    handleCurrentChange(val) {
      this.listQuery.page.pageNum = val
      this.getList()
    },
    // 重置表单
    handleResetFields() {
      this.$refs['searchFromRef'].resetFields()
    },
    // 查询
    handleFilter() {
      this.btnLoading = true
      this.listQuery.page.pageNum = 1
      this.getList().then(() => {
        this.btnLoading = false
      }).catch(() => {
        this.btnLoading = false
      })
    },
    // 获取列表
    getList() {
      this.listLoading = true
      return getList(this.listQuery).then(response => {
        this.list = response.data.records || []
        this.listQuery.page.total = response.data.total || 0

        this.listLoading = false
      }).catch(err => {
        err
        this.listLoading = false
      })
    },
    // 查看
    handleDetail(row) {
      this.$store.dispatch('ShowDrawer', {
        module: MODULE_VALUE,
        type: 'DETAIL',
        params: row
      }).then(res => {

      })
    },
    // 添加
    handleCreate(row) {
      this.$store.dispatch('ShowDrawer', {
        module: MODULE_VALUE,
        type: 'CREATE',
        size: '50%'
      }).then(res => {

      })
    },
    // 编辑
    handleUpdate(row) {
      this.$store.dispatch('ShowDrawer', {
        module: MODULE_VALUE,
        type: 'UPDATE',
        params: row
      }).then(res => {

      })
    },
    // 删除
    handleDelete(row) {
      deleteSave({
        id: row.id
      }).then(response => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      }).catch(err => {
        err
      })
    },
    // 批量删除
    handleBatchDelete() {
      console.log(this.listMultipleSelection)
      const idsArr = []
      for (const item of this.listMultipleSelection) {
        idsArr.push(item.id)
      }
      if (idsArr.length === 0) {
        this.$notify({
          title: '提示',
          message: '请选择数据',
          type: 'warning',
          duration: 2000
        })
      } else {
        const ids = idsArr.toString()
        console.log(ids)
        this.handleDelete({
          id: ids
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
